<template>
    <div class="productCode-searchfor-wrap">
        <el-form :model="searchfor" ref="searchfor" label-width="80px">
            <el-form-item prop="businessUnitId" :label="$t('m.label.BU')" label-width="40px">
                <BU
                    :form="searchfor"
                    formId="businessUnitId"
                    :multiple="true"
                    addSize="mini"
                    @selectAll="getCategory"
                    @selectDel="getCategory"
                    size="small"
                ></BU>
            </el-form-item>
            <el-form-item prop="productCategoryId" :label="$t('m.label.productCategory')">
                <category
                    ref="category"
                    :form="searchfor"
                    formId="productCategoryId"
                    formBU="businessUnitId"
                    :multiple="true"
                    @selectAll="getProduct"
                    @selectDel="getProduct"
                    addSize="mini"
                    size="small"
                ></category>
            </el-form-item>
            <el-form-item prop="productModelNumber" :label="$t('m.label.productModelNumber')">
                <product
                    ref="product"
                    formId="productModelNumber"
                    formBU="businessUnitId"
                    formCategory="productCategoryId"
                    :form="searchfor"
                    :multiple="true"
                    @selectAll="getASIN"
                    @selectDel="getASIN"
                    addSize="mini"
                    size="small"
                ></product>
            </el-form-item>
            <el-form-item prop="asinId" :label="$t('m.label.ASIN')" label-width="50px">
                <ASIN
                    ref="ASIN"
                    formId="asinId"
                    formBU="businessUnitId"
                    formCategory="productCategoryId"
                    formProduct="productModelNumber"
                    :form="searchfor"
                    :multiple="true"
                    @selectAll="getReverse"
                    addSize="mini"
                    size="small"
                ></ASIN>
            </el-form-item>
            <el-form-item label-width="15px">
                <el-button
                    type="primary"
                    @click="submitForm"
                    icon="el-icon-search"
                    size="small"
                >{{$t('m.button.search')}}</el-button>
                <el-button
                    @click="resetForm('searchfor')"
                    icon="el-icon-circle-close"
                    size="small"
                >{{$t('m.button.reset')}}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { BU, category, product, ASIN } from "components/searchfor";
const ERR_OK = 200;
export default {
    data() {
        return {
            searchfor: {
                asinId: [],
                businessUnitId: [],
                productCategoryId: [],
                productModelNumber: [],
                userId: this.$store.getters.userId
            },
            ModelNumber: []
        };
    },
    created() {},
    methods: {
        getCategory() {
            this.$refs.category.getCategory();
            this.$refs.product.getProduct();
            this.$refs.ASIN.getASIN();
        },
        getProduct() {
            this.$refs.category.getCategory(true);
            this.$refs.product.getProduct();
            this.$refs.ASIN.getASIN();
        },
        getASIN(ModelNumber) {
            this.ModelNumber = ModelNumber;
            this.$refs.product.getProduct(true);
            this.$refs.ASIN.getASIN();
        },
        getReverse() {
            this.$refs.ASIN.getASIN(true);
        },
        // 提交搜索
        submitForm() {
            let formData = JSON.parse(JSON.stringify(this.searchfor));
            formData.productModelNumber = this.ModelNumber.filter(item => !formData.productModelNumber.every(el => item.productId !== el)).map(item => item.productModelNumber);
            this.$emit("submitForm", formData);
        },
        // 重置条件
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.getCategory();
        }
    },
    components: {
        BU,
        category,
        product,
        ASIN
    }
};
</script>

<style lang="stylus" scoped>
.el-form-item {
    display: inline-block;
     margin-bottom 10px;    
    .el-select{
        max-width 180px
    }
}
</style>

